<template>
  <div>
    <!-- 样式配置 -->
    <el-tabs v-model="activeName" type="border-card" class="demo-tabs">
      <el-tab-pane label="样式设置" name="first">
        <!-- 二级标题 -->
        <CommonTitleOptions
          colorLabel="二级标题字体颜色"
          fontSizeLabel="二级标题字体大小"
          fontWeightLabel="二级标题字体粗细"
        ></CommonTitleOptions>
        <!-- 公共样式部分 -->
        <Common></Common>
      </el-tab-pane>
      <!-- 数据配置 -->
      <el-tab-pane label="数据配置" name="data">
        <el-form-item label="标题名称:">
          <el-input
            v-model="modelItem.data.title"
            type="text"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <div
          v-for="(item, index) in modelItem.data.LIST"
          :key="index"
          class="edu-list"
        >
          <p>
            <span>学历{{ index + 1 }}</span>
            <el-button
              :disabled="index === 0"
              type="danger"
              :icon="Delete"
              circle
              @click="deleteEdu(index)"
            />
          </p>
          <el-form-item label="日期选择:">
            <el-date-picker
              v-model="item.date"
              type="monthrange"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
            />
            <el-switch v-model="modelItem.data.isShow.date" />
          </el-form-item>
          <el-form-item label="学校名称:">
            <el-input
              v-model="item.schoolName"
              type="text"
              maxlength="40"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.schoolName" />
          </el-form-item>
          <el-form-item label="专业名称:">
            <el-input
              v-model="item.specialized"
              type="text"
              maxlength="20"
              show-word-limit
            />
            <el-switch v-model="modelItem.data.isShow.specialized" />
          </el-form-item>
          <el-form-item label="学历学位:">
            <el-select v-model="item.degree" class="m-2" placeholder="Select">
              <el-option
                v-for="(sItem, sIndex) in degreeList"
                :key="sIndex"
                :label="sItem"
                :value="sItem"
              />
            </el-select>
            <el-switch v-model="modelItem.data.isShow.degree" />
          </el-form-item>
        </div>
        <!-- 添加或删除学历 -->
        <div class="addOrdelet">
          <el-button type="primary" @click="addEdu">添加学历</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import Common from '@/options/Common.vue'
import CommonTitleOptions from '@/options/CommonTitleOptions.vue'
import { useDegreeList } from '@/hooks/useDegreeList'
import useDesignSelectModelItem from '@/hooks/material/useDesignSelectModelItem'
import selectModelItem from '@/hooks/selectModel.ts' //当前选中模块
const modelItem = selectModelItem()
let activeName = ref('first')
const { degreeList } = useDegreeList() // 学历列表
// 添加学历
const addEdu = (): void => {
  modelItem.data.LIST.push({
    date: ['2015-5', '2019-6'],
    schoolName: '小猪大学', // 学校名称
    specialized: '通信工程', // 专业
    degree: '本科', // 学历
    majorCourse: '主修计算机技术、Java、c++等等', // 主修课程
  })
}
// 删除学历
const deleteEdu = (index: number): void => {
  modelItem.data.LIST.splice(index, 1)
}
</script>
<style lang="scss" scoped>
.edu-list {
  p {
    display: flex;
    justify-content: center;
    height: 50px;
    align-items: center;
    margin-bottom: 10px;

    span {
      margin-right: 10px;
    }
  }
}

.addOrdelet {
  width: 100%;
  display: flex;
  height: 50px;
  align-items: center;
}
:deep(.el-input) {
  width: 80%;
  height: 27px;
  line-height: 27px;
  margin-right: 2px;
}

:deep(.el-form-item__label) {
  font-size: 13px;
}

:deep(.el-tabs--border-card) {
  border: 0;
}

/* 日期选择器 */
:deep(.el-range-editor.el-input__wrapper) {
  width: 200px;
}
</style>

<!-- <script setup lang="ts">
  import { ref } from 'vue'
  import Common from '@/options/Common.vue'
  import CommonTitleOptions from '@/options/CommonTitleOptions.vue'
const activeName = ref('first')

</script>
<style lang="scss" scoped></style> -->
